<%@ page pageEncoding="UTF-8"%>
<%@ include file="../commons/head.jsp" %> 
<title>${title }</title>
<style>
.datagrid-body {
height:320px !important;
}
.datagrid-view {
height:350px !important;
}

</style>
<script type="text/javascript">
var gender;
var addFlag;
$(function(){
	$("#search").click(function(){
		var params = {
			usernameLike:$("#usernameLike").val(),
			gender:$("#gender").combobox("getValue"),
			birthdayFrom:$("#birthdayFrom").datebox('getValue'),
			birthdayTo:$("#birthdayTo").datebox('getValue'),
		};
		$("#tt").datagrid("unselectAll");
		$("#tt").datagrid('load',params);
	});
	$("#add").click(function(){
		addFlag=true;
		$("#fm").form('clear');
		$("#dlg").dialog("open");
	});
	$("#edit").click(function(){
		addFlag = false;
		var row = $('#tt').datagrid('getSelected');
		if(!row){
			$.messager.alert("请选择一行","请选择一行","error");
			return ;
		}
		var id = row.id;

		$("#fm").form('load','${ctx}/user/edit?id='+id);
		$("#dlg").dialog("open");
	});
	
	$("#delete").click(function(){
		var row = $('#tt').datagrid('getSelected');
		if(!row){
			$.messager.alert("请选择一行","请选择一行","error");
			return ;
		}
		var id = row.id;
		$.messager.confirm("提示","你确定要删除吗",function(r){
		if(r){
		

		$.ajax({
			url:'${ctx}/user/delete',
			contentType: "application/json; charset=utf-8",
			method:'delete',
			data:JSON.stringify(row),
			dataType:'json',
			success:function(data){
				if(data.result==1){
					$.messager.alert("成功","成功","info",reload);
				}else{
					$.messager.alert("失败",data.msg,"error");
				}
			}
		});
		}
		});

 
	});
	
	
	
	$('#gender').combobox({onLoadSuccess:function(){
		var data = $('#gender').combobox('getData');
		if(data){
 			$("#gender").combobox('select',data[0].id);
		}
	}
	});
	
	$('#gender1').combobox({onLoadSuccess:function(){
		var data = $('#gender1').combobox('getData');
		if(data){
 			$("#gender1").combobox('select',data[0].id);
		}
	}
	});
	
	$("#drop").click(function(){
		if($("#pulldown").css("display")=="none"){
			$("#pulldown").show(500);
			$(this).removeClass("glyphicon-download");
			$(this).addClass("glyphicon-upload");
		}else{
			$("#pulldown").hide(500);
			$(this).addClass("glyphicon-download");
			$(this).removeClass("glyphicon-upload");
		}
		
	});



	$('#fm').form({
    	url:'${ctx}/user/save',
    	onSubmit: function(){
		return $(this).form('validate');
   	},
    success:function(data){
    	data = eval("("+data+")");
		if(data.result==1){
			$.messager.alert("成功","成功","info",reload);
		}else{
			$.messager.alert("失败：",data.msg,"error");
		}
    }
	});
	
//	$("#uname").textbox("disableValidation");
});

function init(){
		$.ajax({
			url:'${ctx}/enum?enumName=Gender',			
			cache:true,
			async:false,
			success:function(data){
				gender = data;
			}
			
		});
}
init();


function saved(){
$('#fm').submit();
}
//重加载
//重加载
function reload(closeFlag){
	if(addFlag){
		$("#fm").form('clear');
	}
	if(closeFlag){
		$("#dlg").dialog('close');
	}
$("#tt").datagrid('reload');
}

function getGender(value,row,index){
	for(var g in gender){
		if(gender[g].id==value){
			return gender[g].name;
		}
	}
	
	return value;
}

function rowStyle(index,row){
	if (index%2==0){     
        return 'background-color:lightcyan;';     
    }     
}

</script>
</head>
<body>
<div class="jianju">
<h3>例子    用户列表</h3>
	<!-- <div style="margin:20px 0;"></div> -->
	
	<div id="tb" style="padding:5px;height:auto">
	<div style="margin-bottom:5px">
		<a id="add" href="#" class="easyui-linkbutton button" iconCls="icon-add" plain="false">新增</a>
		<a id="edit" href="#" class="easyui-linkbutton button" iconCls="icon-edit" plain="false">编辑</a>
		<a id="delete" href="#" class="easyui-linkbutton button" iconCls="icon-remove" plain="false">删除</a>
	</div>
	<hr/>
	<div>
		<label style="margin-left:0;">用户名:</label> <input id="usernameLike" class="easyui-textbox" style="width:100px">
		<label>性别: </label>
		<select id="gender" class="easyui-combobox" style="width:100px" mode="remote"
				url="${ctx}/enum?enumName=Gender&all=true"
				valueField="id" textField="name" method="get" editable="false"
				panelHeight="auto">
		</select>
		<a id="search" href="#" class="easyui-linkbutton button" style="margin-left:15px;" iconCls="icon-search">Search</a>
		<br>
		<div id="pulldown" style="display: none;">
		<label>生日:</label><input id="birthdayFrom" type="text" class="easyui-datebox" editable="false" style="width:100px" />  ~ <input id="birthdayTo" type="text" style="width:100px" class="easyui-datebox" />  
		</div>
		<div class="demo_line_01"><span class="line"></span> <span id="drop" style="font-size: 20px;margin-right:12px" class="glyphicon glyphicon-download"> </span><span class="line"></span></div>
	</div>
</div>

	<table id="tt" class="easyui-datagrid" 
		url="${ctx}/user/list"
		title="" style="width:98%;minWidth:1000px;" iconCls="icon-save"
		rownumbers="true" pagination="true"
		pageList="[10,20,30,40]" method="get"
		toolbar="#tb" singleSelect="true"
		fitColumns="true" idField="id" rowStyler="rowStyle">
		<thead>
			<tr style="background:#148CCA;">
				<th data-options="field:'id'" style="width:10% ">id</th>
				<th data-options="field:'username'" style="width:30% ">用户名</th>
				<th data-options="field:'birthday'" style="width:30% ">生日</th>
				<th data-options="field:'gender',formatter:getGender" style="width:28% ">性别</th>
			</tr>
		</thead>
	</table>
</div>

<div id="dlg" class="easyui-dialog" style="width:500px;height:280px;padding:10px 20px"
		closed="true" buttons="#dlg-buttons" modal="true">
	<div class="ftitle"> </div>
	<form id="fm" method="post" class="form-horizontal" role="form">
		<input type="hidden" name="id">
		<div id="username" class="fitem form-group diaform">
			<label class="col-md-3 control-label">用户名:</label>
			<div class="col-md-4" style="padding:0">
			<input id="uname" name="username" class="easyui-validatebox easyui-textbox" style="width:162px" placeholder="请输入用户名" required="true" validType="length[6,20]">
			</div>
		</div>
		<div class="fitem form-group diaform">
			<label class="col-md-3 control-label">性别:</label>
			<div class="col-md-4" style="padding:0">
			<select id="gender1" class="easyui-combobox" style="width:162px" mode="remote"
				url="${ctx}/enum?enumName=Gender" name="gender"
				valueField="id" textField="name" method="get" editable="false"
				panelHeight="auto">
			</select> 
			</div>
		</div>
		<!-- <div class="fitem">
			<label>性别:</label>
			<select id="gender1" class="easyui-combobox" style="width:100px" mode="remote"
				url="${ctx}/enum?enumName=Gender" name="gender"
				valueField="id" textField="name" method="get" editable="false"
				panelHeight="auto">
		</select> 
		</div> -->
		<div class="fitem form-group diaform">
			<label class="col-md-3 control-label">生日:</label>
			<div class="col-md-4" style="padding:0">
			<input name="birthday" type="text" editable="false" style="width:162px" class="easyui-datebox form-control" />
			</div>
		</div>
	</form>
</div>
<div id="dlg-buttons">
	<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="javascript:saved()">Save</a>
	<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:reload(true);">Cancel</a>
</div>
</body>
</html>